<template>
  <div>
    <div class='flex-row' id="box" v-el:box v-if="!isManger">
      <div class="flex tree-flex" :class="{'tree-flex-icon': !treeOrIcon}" id="top" v-el:top >
          <h3>Aote</h3>
          <div class="span" style="margin-bottom:20px;flex: 1;">
            <left-tree :functions='functions.functions' :userid='userid' v-show="treeOrIcon" v-ref:tree></left-tree>
            <icon-tree :functions='functions.functions' :userid='userid' v-show="!treeOrIcon"></icon-tree>
          </div>

        <div class="tree-flex-footer">
            <a @click="changeShow()"><img :src="imgs.open" alt=""><span v-if="treeOrIcon">菜单伸缩</span></a>
            <!-- <a><img src="../../../static/treeset.png" alt="">系统设置</a> -->
            <dropdown class="auto">
              <button type="button" data-toggle="dropdown">
                <img :src="imgs.set" alt=""><span v-if="treeOrIcon">系统设置</span>
              </button>
              <ul slot="dropdown-menu" class="dropdown-menu dropdown-menu-up">
                <li>系统信息及设置</li>
                <li>{{name}}</li>
                <li>{{date}}</li>
                <li @click="show=true">修改密码</li>
                <li @click="AddChangeMsgShow=true">系统版本:1.0.0</li>
              </ul>

            </dropdown>
            <a href="home.html" onclick="return confirm('您确定要退出系统吗？');">
              <img :src="imgs.out" alt="" ><span v-if="treeOrIcon">退出系统</span>
            </a>
        </div>
      </div>

      <!-- <div class="line" id="line" v-show="treeOrIcon" v-el:line></div> -->

      <div class="flex right-bg" id="bottom" v-el:bottom>
        <!-- <operator-badge></operator-badge> -->
        <div class="span">
          <!-- <echarts-box v-if="$refs.mic.tabs.length === 0"></echarts-box> -->
          <!-- <dynamic :comps='[]' name='main' @tab-changed="tabChange" v-ref:mic v-show="!($refs.mic.tabs.length === 0)"></dynamic> -->
          <dynamic :comps='[]' name='main' @tab-changed="tabChange" v-ref:mic ></dynamic>
        </div>
      </div>
    </div>
    <div v-show="isManger">
      <route  v-ref:route></route>
    </div>

     <!-- 变更录入 模态框 -->
    <add-changemsg :show="AddChangeMsgShow" v-on:toggle = "AddChangeMsgShow = false"></add-changemsg>
    <!-- 修改密码组件 -->
    <modify-pw :show.sync="show" v-if="show"><modify-pw>
    <!-- 修改密码模态框 -->
  </div>
</template>

<script>
import * as Util from './Util'

export default {
  title: '主界面',
  props: ['functions', 'userid'],
  data () {
    return {
      // 左侧树下部三个小图标
      imgs: {
        open: '/images/mainicon/treeopen.png',
        set: '/images/mainicon/treeset.png',
        out: '/images/mainicon/treeout.png'
      },
      treeOrIcon: false,
      isManger: false,
      show: false,
      name: Util.f.name,
      date: Util.toStandardDateString()

      // headerHint: true, // 右侧顶部提示信息
      // value: 25645.26,
      // AddChangeMsgShow: false,
      // showsum: false
    }
  },
  ready () {
    let component = Util.getUrlCompileParames('component')
    if (component) {
      this.isManger = true
      this.$refs.route.init(component, {data: this.functions.functions})
    }
  //   let oBox = this.getElement("box")
	// 	let	oTop = this.getElement("top")
	// 	let	oBottom = this.getElement("bottom")
	// 	let oLine = this.getElement("line")
  //   let that = this
	// 			oLine.onmousedown = function(e) {
	// 				let disX = (e || event).clientX
	// 				oLine.left = oLine.offsetLeft
	// 				document.onmousemove = function(e) {
	// 					let iT = oLine.left + ((e || event).clientX - disX)
  //           var e = e || window.event
	// 					let tarnameb = e.target || e.srcElement
	// 					let maxT = oBox.clientWight - oLine.offsetWidth
	// 					oLine.style.margin = 0
	// 					iT < 0 && (iT = 0)
	// 					iT > maxT && (iT = maxT)
	// 					oLine.style.left = oTop.style.width = iT + "px"
	// 					oBottom.style.width = oBox.clientWidth - iT + "px"
  //           that.$set('treeWidth', iT)
	// 					return false
	// 				}
	// 				document.onmouseup = function() {
	// 					document.onmousemove = null
	// 					document.onmouseup = null
	// 					oLine.releaseCapture && oLine.releaseCapture()
	// 				}
	// 				oLine.setCapture && oLine.setCapture()
	// 				return false
	// 			}
    this.changeShow()
  },
  methods: {
    unfurl () {
      if(this.showsum){
        this.showsum = false
      } else {
        this.showsum = true
      }
    },
    // getElement(id) {
    //   return document.getElementById(id)
    // },
    changeShow () {
    //   this.treeOrIcon = !this.treeOrIcon
    //   let oBox = this.getElement("box")
  	// 	let	oTop = this.getElement("top")
  	// 	let	oBottom = this.getElement("bottom")
  	// 	let oLine = this.getElement("line")
    //   if (this.treeOrIcon) {
    //     // oLine.style.left = oTop.style.width = 300 + "px"
    //     oTop.style.width = 150 + "px"
    //     oBottom.style.width = oBox.clientWidth - 150 + "px"
    //   }else {
    //     oLine.style.left = oTop.style.width = 50 + "px"
    //     oBottom.style.width = oBox.clientWidth - 50 + "px"
    //   }
    // }
      this.treeOrIcon = !this.treeOrIcon
      if (this.treeOrIcon) {
        this.$els.top.style.width = 200 + "px"
        this.$els.bottom.style.width = this.$els.box.clientWidth - 200 + "px"
      }else {
        this.$els.top.style.width = 50 + "px"
        this.$els.bottom.style.width = this.$els.box.clientWidth - 50 + "px"
      }
    },
    tabChange (name) {
      this.$refs.tree.changeSelect(name)
    }
  },
  computed: {
    nowDate () {
      return Util.getNowDate()
    }
  }
}
</script>
<style lang="less">
  /* 组件内通用样式 */
  .select-error {
    button {
      border-bottom: 1px solid #a94442!important;
    }
  }
  /* 表单输入框组 */
  .form-input-group {
    display: flex;

    label {
      width: 100px;
      text-align: right;
      + * {
        flex: 1;
      }
    }
  }
  // 日期组件在表单中沾满
  .form-horizontal .datepicker {
    width: 100%;
  }
  // 下拉选择框占据剩余全部空间
  .select-overspread {
    .form-group {
      // margin: 0px 5px 10px 0px;
      .form-control {
        margin-right: 0px;
      }
    }
    .btn-group, .btn-group-vertical {
      width: 100%;
      // padding-right: 5px;
      button {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .dropdown-menu {
      width: 100%
    }
  }
  // 需要特定宽度的的样式
  .width-60 {
    width: 60px;
  }
  .width-80 {
    width: 80px;
  }
  .width-100 {
    width: 100px;
  }



  /*右侧区域的背景*/
  .right-bg {
    width: 100%;
    flex: 1;
    padding: 10px 25px;
    color: #304A66;
  }
  .tree-flex {
    height: 100%;
    // width: 150px;
    /*width: 60px;*/
    background: #4C637B;
    color: #fff;

  }
  .tree-flex-icon {
    width: 50px;
    /*transition: 0.5s;*/
    > .span {
      overflow-x: visible;
    }
  }
  .tree-flex h3 {
    text-align: center;
    line-height: 80px;
    margin: 0px;
  }

  .tree-flex-footer {
    height: 150px;
    display: flex;
    flex-direction:column;
    color: #fff;
  }
  .tree-flex-footer a,.tree-flex-footer button{
    flex: 1;
    padding: 8px 5px;
    font-size: 1.2em;
    border-top: 1px solid #697D93;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
  }
  .tree-flex-footer button {
    height: auto;
    width: 100%;
    border-radius: 0px;
    background-color: rgba(255,255,255,0);
    border: none;
    border-top: 1px solid #697D93;
    text-align: left;
  }
  .tree-flex-footer button:hover{
    outline: none;
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex-footer button:focus {
    outline: none;
    background-color: rgba(255,255,255,0.5);
  }
  .tree-flex-footer a:hover {
    color: #FFF;
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex  .btn-group {
    height: 50px!important;
  }

  .tree-flex .dropdown-menu {
    /* 控制显示列表的样式 */
    background: #4C637B;
    border-radius: 0px;
    color: #fff;
    width: auto;
    margin: 0px;
    padding: 0px;
  }
  .tree-flex .dropdown-menu-up {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: auto!important;
    bottom: 0;
  }
  .tree-flex .dropdown-menu-down {
    /* bottom，top控制上下，left和right控制左右*/
    left: 100%!important;
    top: 0!important;
  }
  .tree-flex .dropdown-menu li{
    text-align: center;
    line-height: 50px;
    border-bottom: 1px solid #697D93;
    font-size: 1.2em;
    width: auto;
    white-space: nowrap;
    cursor: default;

  }
  .tree-flex .dropdown-menu li + li {
    text-align: left;
    border: 0;
    line-height: 40px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 1em;
    cursor: pointer;
  }
  .tree-flex .dropdown-menu li + li:hover {
    background-color: rgba(255,255,255,0.2);
  }
  .tree-flex .dropdown-menu li a {
    border: none;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 1em;
    padding: 0px;
  }
  .tree-flex .dropdown-menu li a:hover {
    color: #fff;
    background-color: rgba(255,255,255,0);
  }
  .tree-flex img{
    height: 30px;
    margin-right: 15px;
  }
  .line {
    height: 100%;
    width: 5px;
    background: #4C637B;
    cursor: e-resize;
  }
  /*为树（tree）组件写的样式*/
  .tree-img {
    font-size: 1.2em;
  }

  /* 滚动条样式 */
  /* 隐藏与现实滚动条 */
  .scrollbar {
    ::-webkit-scrollbar{
      display: none;
    }
    &:hover {
      ::-webkit-scrollbar{
        display: inherit;
        // float: right;
        // left: 8px;
      }
    }
  }
  /* 滚动条整体样式 */

  /*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{
  //  display: none;
   background-color:rgba(0,0,0,0.15);
   height:50px;
   outline-offset:-2px;
   /*outline:2px solid #fff;*/
   -webkit-border-radius:4px;
   position: relative;
   left: 8px;
   /*border: 2px solid #fff;*/
}

/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{
  //  display: inherit;
   background-color:rgba(0,0,0,0.4);
   height:50px;
   -webkit-border-radius:4px;
}
/*---滚动条大小--*/
::-webkit-scrollbar{
   width:8px;
   height:8px;
}
/*---滚动框背景样式--*/
::-webkit-scrollbar-track-piece{
  /* 全透明，不显示 */
   background-color:rgba(255,255,255,0);
   -webkit-border-radius:0;
}

/* checkbox和radio的样式 */
.magic-radio,
.magic-checkbox {
  position: absolute;
  display: none;
}

.magic-radio[disabled],
.magic-checkbox[disabled] {
  cursor: not-allowed;
}

.magic-radio + label,
.magic-checkbox + label {
  position: relative;
  display: block;
  padding-left: 30px;
  cursor: pointer;
  vertical-align: middle;
  text-align: left;
}

.magic-radio + label:hover:before,
.magic-checkbox + label:hover:before {
  animation-duration: 0.4s;
  animation-fill-mode: both;
  animation-name: hover-color;
}

.magic-radio + label:before,
.magic-checkbox + label:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: '';
  border: 1px solid #c0c0c0;
}

.magic-radio + label:after,
.magic-checkbox + label:after {
  position: absolute;
  display: none;
  content: '';
}

.magic-radio[disabled] + label,
.magic-checkbox[disabled] + label {
  cursor: not-allowed;
  color: #e4e4e4;
}

.magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
.magic-checkbox[disabled] + label:hover,
.magic-checkbox[disabled] + label:before,
.magic-checkbox[disabled] + label:after {
  cursor: not-allowed;
}

.magic-radio[disabled] + label:hover:before,
.magic-checkbox[disabled] + label:hover:before {
  border: 1px solid #e4e4e4;
  animation-name: none;
 }

.magic-radio[disabled] + label:before,
.magic-checkbox[disabled] + label:before {
  border-color: #e4e4e4;
}

.magic-radio:checked + label:before,
.magic-checkbox:checked + label:before {
  animation-name: none;
}

.magic-radio:checked + label:after,
.magic-checkbox:checked + label:after {
  display: block;
}

.magic-radio + label:before {
  border-radius: 50%;
}

.magic-radio + label:after {
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #98CFEE;
}

.magic-radio:checked + label:before {
  border: 2px solid #98CFEE;
}

.magic-radio:checked[disabled] + label:before {
  border: 2px solid #c9e2f9;
}

/*.magic-radio:checked[disabled] + label:after {
background: #c9e2f9; }*/

.magic-checkbox + label:before {
  border-radius: 3px;
}

.magic-checkbox + label:after {
  top: 2px;
  left: 7px;
  box-sizing: border-box;
  width: 6px;
  height: 12px;
  transform: rotate(45deg);
  border-width: 2px;
  border-style: solid;
  border-color: #fff;
  border-top: 0;
  border-left: 0;
}

.magic-checkbox:checked + label:before {
  border: #98CFEE;
  background: #98CFEE;
}

.magic-checkbox:checked[disabled] + label:before {
  border: #c9e2f9;
  background: #c9e2f9;
}
</style>
